<template>
  <div class="commonButton" :style="commpStyle">
    <el-button @click="click($event)" :type="type" :plain="plain" :size="size" :icon="icon" :loading="loading"
               :round="round" :circle="circle" :disabled="disabled" :style="styleButton" :class="classButton"
               @mouseover="mouseOver">{{ name }}
    </el-button>
  </div>
</template>

<script>
import baseComp from "./baseComp";

export default {
  name: "commonButton",
  extends: baseComp,
  props: {
    //类型
    type: {
      type: String,
      default: 'primary'
    },
    //是否朴素按钮
    plain: {
      type: Boolean,
      default: false,
    },
    //是否圆角按钮
    round: {
      type: Boolean,
      default: false,
    },
    //是否圆形按钮
    circle: {
      type: Boolean,
      default: false,
    },
    //是否加载中状态
    loading: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '按钮',
    },
    //图标类名
    icon: {
      type: String,
      default: 'el-icon-star-on',
    },
    //尺寸
    size: {
      type: String,
      default: 'small',
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    styleButton: {},
    classButton: {},
  },
  watch: {},
  data() {
    return {}
  },
  methods: {
    click(event) {
      //阻止冒泡事件
      event.stopPropagation();
      //调用同一调度接口，实现事件向上传递调度。
      this.executeEvent(event.type, this.path, this.inData);
    },
    mouseOver() {
      document.this.classButton = true;
    },
  },
  computed: {}


}
</script>

<style scoped>
.el-button:hover {
  /*background: #d3e2ff !important;*/
}

</style>
